<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Insert title here</title>
<style type="text/css">

</style>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$.ajaxSetup ({
    cache: false
});

$(document).ready(function () {
	index = new Number(0);
	images = new Array();
	
	function loader(n) {
		if (index == 0)
			$("#prev-btn").hide()
		else
			$("#prev-btn").show();
		  
		if (index == images.length-1)
			$("#next-btn").hide();
		else
			$("#next-btn").show();
		  
		$('#img-placeholder').html('<center><img src="images/'+n+'" width="300" height="300"/></center>');
		
		$('#text-placeholder p').remove();
		
		$.ajax({
	        type: "GET",
	        url: "/webtek_js/commentserver/"+n,
	        cache: false,
	        dataType: "xml",
	        success: function(xml) {	
	            $(xml).find('comment').each(function() {
	            	$('#text-placeholder').append($('<p>').append($(this).text()).append('<hr>')); 
	            });      
	        }
	    });  
	}
	
	$.ajax({
        type: "GET",
        url: "/webtek_js/imageserver/images",
        cache: false,
        dataType: "xml",
        success: function(xml) {
            $(xml).find('image').each(function(){
                images.push($(this).text());
            });
            loader(images[0]);  
        }
    });
	
	$("#prev-btn").click(function(event) {
    	index--;
    	loader(images[index]); 
    });

    $("#next-btn").click(function(event) {    
    	index++;
    	loader(images[index]); 
    });
    
    $("#comment-post-btn").click(function(event) {    
    	var text = $('#comment-post-text').val();
    	if (text.length > 0) {
    		$('#comment-post-text').css('border', '1px solid #000000');
    		
    		$.ajax({
    	        type: "PUT",
    	        url: "/webtek_js/commentserver/"+images[index],
    	        cache: false,
    	        data: text,
    	        success: function(xml) {
    	        	$('#text-placeholder').append($('<p>').append(text).append('<hr>'));
    	        	$('#comment-post-text').val(''); 
    	        }
    	    });
    	}
    	else {
    		$('#comment-post-text').css('border', '1px solid #ff0000');
    	} 
    }); 
});
</script>

<body>
	<table width="100%" border="0">
		<tr>
			<td width="20"><div id="prev-btn"><input type="button" value="prev" /></div></td>
			<td width="100%"><div id="img-placeholder"><br></div></td>
			<td width="20"><div id="next-btn"><input type="button" value="next" /></div></td>
		</tr>
		<tr>
			<td colspan="3">
				<center>
					<div class="comment-insert-container">
						<textarea id="comment-post-text" rows="5" cols="50"></textarea>
					</div>
					<input id="comment-post-btn" type="button" value="post">
					<div id="text-placeholder"><hr></div>
				</center>
			</td>
		</tr>
	</table>
</body>
</html>